<h1 style="margin-bottom: 20px;" class="center-block text-center" translate="ADMIN.STAFF_MESSAGES"></h1>

<loading-indicator hide="vm.mailbox"></loading-indicator>

<div class="col-lg-10 col-lg-push-1" ng-show="vm.mailbox">
	<table class="table table-stripedSpecial table-hover" style="table-layout: fixed;" ng-init="itemNew=[]">
		<thead>
			<th class="text-left" translate="MAILBOX.FROM"></th>
			<th class="text-left" translate="MAILBOX.SUBJECT"></th>
			<th class="text-left" translate="MAILBOX.RECEIVED"></th>
			<th class="text-left" style="width: 200px;" translate="MAILBOX.ANSWERED"></th>
			<th class="text-left" translate="MAILBOX.ANSWERED_AFTER"></th>
		</thead>
		<tbody>
			<tr ng-init="itemsDisplay=[]" ng-repeat-start="mail in vm.mailbox track by mail.id" ng-click="itemsDisplay[$index] = !itemsDisplay[$index]; readMessage(mail);">
				<td class="ellipsis" style="cursor: pointer;"><user user="::mail.user"></user></td>
				<td class="ellipsis" style="cursor: pointer;" title="{{ ::mail.subject }}"><span ng-show="mail.fromprivate == 'yes'" class="label label-info" translate="MAILBOX.PM"></span>{{ ::mail.subject }}<span ng-show="::mail.subject.length < 1" translate="MAILBOX.NO_SUBJECT"></span></td>
				<td style="cursor: pointer;">{{ ::mail.added | dateDifference }} {{ 'MAILBOX.AGO' | translate }}</td>
				<td>
					<span ng-show="mail.answered == 1 && mail.answeredAt != '0000-00-00 00:00:00'">
						<span class="label label-success" translate="BUTTONS.YES"></span> <user user="mail.answeredBy"></user>
						<button class="btn btn-xs btn-default" ng-click="vm.viewAnswer(mail); $event.stopPropagation();" translate="MAILBOX.SEE_ANSWER"></button>
					</span>
					<span ng-show="mail.answered == 1 && mail.answeredAt == '0000-00-00 00:00:00'">
						<span class="label label-warning" translate="MAILBOX.PROCESSING"></span> <user user="mail.answeredBy"></user>
					</span>
					<span ng-show="mail.answered == 0">
						<span class="label label-danger" translate="BUTTONS.NO"></span>
					</span>
				</td>
				<td style="cursor: pointer;"><span ng-show="mail.answeredAt != '0000-00-00 00:00:00'">{{ mail.added | dateDifference:mail.answeredAt }}</span></td>
			</tr>
			<tr ng-repeat-end ng-show="itemsDisplay[$index]">
				<td colspan="5" style="background-color: #FFF;" class="text-left">
					<div class="forumAvatarHolder">
						<div ng-if="mail.user.avatar && vm.currentUser.avatars == 'yes'" class="post-avatar" style="background-image: url('{{mail.user.avatar}}');"></div>
						<div ng-if="vm.currentUser.avatars == 'no' || !mail.user.avatar" class="post-avatar" style="background-image: url('/img/default-avatar.png');"></div>
					</div>
					<div class="forumPost">
						<div class="button-group mailbox-buttons">
							<button ng-if="mail.answered == 0 || mail.answeredBy.id == vm.currentUser.id " ng-click="vm.replyMessage(mail)" class="btn btn-default btn-xs"><i class="fa fa-reply"></i> {{ 'MAILBOX.ANSWER' | translate }}</button>
							<button ng-if="mail.answered > 0 && mail.answeredBy.id != vm.currentUser.id" class="btn btn-default btn-xs disabled"><i class="fa fa-reply"></i> {{ 'MAILBOX.ALREADY_ANSWERED' | translate }}</button>
						</div>
						<p ng-bind-html="::mail.body | bbCode" style="padding: 5px;"></p>
					</div>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<div class="text-center">
	<uib-pagination max-size="10" items-per-page="vm.itemsPerPage" total-items="vm.totalItems" ng-model="vm.currentPage" ng-click="vm.getMessages()" previous-text="{{ 'PAGER.PREVIOUS' | translate }}" next-text="{{ 'PAGER.NEXT' | translate }}" boundary-links="true" first-text="{{ 'PAGER.FIRST' | translate }}" last-text="{{ 'PAGER.LAST' | translate }}"></uib-pagination>
</div>
